<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <!-- 引入路由模块 -->
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            .header{
                background: red;
                height: 100px;
            }
            .container{
                display:flex;
                height: 500px;
            }
            .left{
                background: lightblue;
                flex:2;
            }
            .main{
                background: lightsalmon;
                flex:8;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <router-view></router-view>
            <div class="container">
                <router-view name="left"></router-view>
                <router-view name="main"></router-view>
            </div>
           
        </div>
    
    </body>
    <script>
        let header = {
            template:"<h1 class='header'>Header头部区域</h1>"
        }
        let leftBox = {
            template:"<h1 class='left'>leftBox侧边栏区域</h1>"
        }
        let mainBox = {
            template:"<h1 class='main'>MainBox主体区域</h1>"
        }
        let router = new VueRouter({
            routes:[
                {path:'/',components:{
                    'default':header,
                    'left':leftBox,
                    'main':mainBox
                }},
                // {path:'/',component:header},
                // {path:'/left',component:leftBox},
                // {path:'/main',component:mainBox}
            ]
        })
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                
            },
            methods:{
                
            },
            router
        })
    </script>
</html>